<template>
  <div class="login">
    <div class="box">
      <h1 align="center">积云舆情监控系统后台管理</h1>
      <p>
        <strong>用户名 : </strong>
        <a-input
          v-model:value="username"
          style="width: 300px"
          placeholder="请输入用户名"
        />
      </p>
      <p>
        <strong>密&emsp;码 : </strong>
        <a-input-password
          v-model:value="password"
          style="width: 300px"
          placeholder="请输入密码"
        />
      </p>
      <p>
        <strong>验证码 : </strong>
        <a-input
          v-model:value="verify"
          placeholder="请输入验证码"
          style="width: 150px"
        />
        <i class="svgImg" @click="getCaptcha" v-html="svgImg"></i>
      </p>
      <p style="margin-left: 153px">
        <a-button type="primary" @click="submit">登录</a-button>
      </p>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, ref, reactive, toRefs, computed } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { useThrottle } from "@/hook/useThrottle";
import userApi from "@/api/user";
import { message } from "ant-design-vue";
export default defineComponent({
  setup() {
    let store = useStore();
    let router = useRouter();
    let state = reactive({
      username: "",
      password: "",
      svgKey: "",
      verify: "",
    });
    let svgImg = ref("");

    let getCaptcha = () => {
      userApi.getCaptcha().then((res: any) => {
        console.log(res);
        svgImg.value = res.data.svgImg;
        state.svgKey = res.data.svgKey;
      });
    };
    getCaptcha();

    let doLogin = () => {
      userApi.doLogin(state).then((res: any) => {
        console.log(res);
        let token = res.data.result.token;
        if (res.data.success) {
          let menuArray = reactive([
            {
              id: 1,
              name: "起始页",
              icon: "icon-zhuye",
              children: [
                {
                  id: "4",
                  title: "起始页",
                  children: [
                    {
                      id: 41,
                      name: "后台首页",
                      path: "/index",
                    },
                  ],
                },
              ],
            },
            {
              id: 2,
              name: "舆情报告",
              icon: "icon-shujukanban",
              children: [
                {
                  id: "5",
                  title: "舆情报告",
                  children: [
                    {
                      id: 51,
                      name: "全部舆情",
                      path: "/all",
                    },
                    {
                      id: 52,
                      name: "正面舆情",
                      path: "/positive",
                    },
                    {
                      id: 53,
                      name: "负面舆情",
                      path: "/negative",
                    },
                  ],
                },
              ],
            },
            {
              id: 3,
              name: "舆情设置",
              icon: "icon-shezhi",
              children: [
                {
                  id: "6",
                  title: "舆情设置",
                  children: [
                    {
                      id: 61,
                      name: "舆情关键词设置",
                      path: "/keyword",
                    },
                    {
                      id: 62,
                      name: "舆情报警设置",
                      path: "/alarm",
                    },
                  ],
                },
              ],
            },
          ]);
          res.data.result.menu = menuArray;
          store.dispatch("setChangeToken", token);
          store.dispatch("setChangeUserInfo", res.data.result);
          router.push({
            path: "/home",
          });
          message.success(res.data.message);
        } else {
          message.error(res.data.message);
        }
      });
    };

    let submit = useThrottle(doLogin, 1000);

    return {
      ...toRefs(state),
      svgImg,
      getCaptcha,
      submit,
    };
  },
});
</script>

<style scoped >
.login {
  width: 100%;
  height: 100%;
  background-color: steelblue;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box {
  width: 800px;
  height: 350px;
  background-image: url("../assets/loginbg.jpg");
  background-size: 100% 100%;
  position: relative;
}
p {
  margin-left: 100px;
  margin-top: 35px;
}
.svgImg {
  float: right;
  position: absolute;
  top: 200px;
  left: 320px;
}
</style>
